<script setup lang="ts">
const props = defineProps<{
    point: number,
}>()

</script>

<template>
    <div class="points">
        <div class="points-content">
            <img class="trophy" src="@/assets/imgs/flame.png" alt="trophy" width="28">
            <span class="points-num">{{ props.point }}</span>
            <!-- TODO: 暂时去除该元素-->
            <!-- <span class="points-icon" @click=""></span> -->
        </div>
    </div>
</template>

<style scoped lang="scss">
.points {
    display: flex;
    align-items: center;
    color: var(--simple-color);
    justify-content: flex-end;

    &-content {
        display: flex;
        align-items: center;
        position: relative;
        height: 8.5vmin;
        border-radius: 5vmin;
        border-radius: 10vmin;
        padding-left: 10vmin;
        padding-right: 5vmin;
        box-shadow: 0px 0px .4vmin #838383;
        background-color: var(--main-color);

        img {
            position: absolute;
            left: 4vmin;
            width: 4vmin;
            filter: var(--trophy-box-shadow);
        }

        .points-num {
            display: block;
            max-width: 21vmin;
            font-size: var(--normal-font-size);
            color: var(--simple-color);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .points-icon {
            --size: 7vmin;
            position: absolute;
            top: 50%;
            right: 3vmin;
            transform: translateY(-50%);
            width: var(--size);
            height: var(--size);
            background-color: var(--simple-color);
            border-radius: 50%;

            @mixin points-icon {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 5vmin;
                height: 1vmin;
                background-color: #ffffff;
                border-radius: 1vmin;
            }

            &::before {
                @include points-icon;
                transform: translate(-50%, -50%);
            }

            &::after {
                @include points-icon;
                transform: translate(-50%, -50%) rotate(90deg);
            }
        }
    }
}
</style>